<template>
  <div class="staCompreWrap1">
    <NavBar
      :title="'现场灾情'"
      :cityName="cityName"
      :areaName="areaName"
      @clicksPopul="clicksPopul"
      :text="'返回'"
      :SeveralMenus="'1'"
    ></NavBar>
    <div class="search">
      <img src="../assets/scene/search.png" alt="" />
      <van-field
        style="
          width: 345px;
          height: 34px;
          background: rgba(3, 120, 255, 0.1);
          border-radius: 17px;
        "
        @keyup.enter.native="toSearch('Disastersituationlist')"
        v-model="search1"
        placeholder="查询"
      />
    </div>
    <!-- <div class="chaxun" @click="onClickRight('Disastersituationlist')">
      <van-icon name="apps-o" />查询
    </div> -->
    <div class="Disastermanagement">灾情管理</div>
    <div class="titleArea">
      <!-- <span class="titleCon">灾情管理</span> -->

      <div class="top">
        <div class="right">
          <div class="class9">
            <div class="box" v-for="(item, index) in list1" :key="index">
              <div
                :class="item.state == true ? 'active' : 'box2'"
                @click="clicks1(item, index)"
              >
                <img
                  class="image"
                  v-if="item.state == false"
                  :src="item.imgUrl"
                  alt=""
                />
                <img class="image" v-else :src="item.imgUrlactive" alt="" />
              </div>
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="class9">
            <div class="box" v-for="(item, index) in list2" :key="index">
              <div
                :class="item.state == true ? 'active' : 'box2'"
                @click="clicks2(item, index)"
              >
                <img
                  class="image"
                  v-if="item.state == false"
                  :src="item.imgUrl"
                  alt=""
                />
                <img class="image" v-else :src="item.imgUrlactive" alt="" />
              </div>
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="class9">
            <div class="box" v-for="(item, index) in list3" :key="index">
              <div
                :class="item.state == true ? 'active' : 'box2'"
                @click="clicks3(item, index)"
              >
                <img
                  class="image"
                  v-if="item.state == false"
                  :src="item.imgUrl"
                  alt=""
                />
                <img class="image" v-else :src="item.imgUrlactive" alt="" />
              </div>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <van-form>
          <div class="photo">
            <p>
              <span style="font-weight: 500; color: #101010; font-size: 15px"
                >照片上传</span
              ><span style="color: #656b75">(图片大小不能超过10m)</span>
              <span style="display: inline-block; float: right; color: #656b75"
                >{{ fileList.length }}/9</span
              >
            </p>

            <van-uploader
              multiple
              v-model="fileList"
              bind:after-read="afterRead"
              :max-count="9"
              upload-icon="plus"
            ></van-uploader>
          </div>
          <div>
            <div class="zaiqing">
              灾情描述&nbsp;<span style="color: #656b75; font-size: 12px"
                >(不超过200字)</span
              >
            </div>
            <van-field
              v-model="desc"
              rows="2"
              class="zaiqingtext"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="灾情描述(不超过200字)"
              show-word-limit
            />
          </div>

          <div style="margin-top: -5px; margin-bottom: 8px">
            <div class="fstime">发生时间</div>
            <div class="date-time-input-wrap">
              <img src="../assets/On-sitedisaster/rili.png" alt="" />
              <van-field
                v-model="userListForm.end_time"
                placeholder="选择时间"
                readonly="readonly"
                @click="endTimePop = true"
              />

              <van-popup
                v-model="endTimePop"
                label="离开时间"
                position="bottom"
                :overlay="true"
              >
                <van-datetime-picker
                  v-model="currentDate_end"
                  type="datetime"
                  @cancel="endTimePop = false"
                  @confirm="endTimePop = false"
                  @change="endTimeChange"
                  :columns-order="['year', 'month', 'day', 'date', 'fen']"
                  :formatter="formatter"
                />
              </van-popup>
            </div>
          </div>
          <!-- <div style="margin-top: 15px;margin-bottom: 10px;">
            <van-button type="primary" block @click="confirm">确认</van-button>
          </div> -->

          <div class="fstime">灾情定位</div>
          <div class="text">
            <img src="../assets/On-sitedisaster/dingwei.png" alt="" />
            <van-field
              @focus="focus($event)"
              v-model="dingwei"
              placeholder="当前定位"
            /><van-button @click="geoCode">查询</van-button>
          </div>
        </van-form>
      </div>
      <div class="bottom" id="map"></div>
    </div>
    <div class="queren">
      <van-button block @click="confirm">确认</van-button>
    </div>
    <comArea
      v-if="showArea"
      @closeEmit="showArea = false"
      :arr="arr1"
      @confirmEmit="confirmEmitMet"
    >
    </comArea>
  </div>
</template>

<script type="text/javascript">
import disastersituationApi from "@/service/disastersituation.js";
import meteoroHomeApi from "@/service/home.js";
import comArea from "../components/common/area.vue";
import Vue from "vue";
import { Field, Toast, Uploader, Form } from "vant";
import point from "@/assets/point.png";
import footer from "../components/common/footer.vue";
import map from "@/util/map.js";
import { getItem } from "../util/storage.js";
Vue.use(Field);
Vue.use(Toast);
Vue.use(Form);
Vue.use(Uploader);
export default {
  data() {
    return {
      currentDate_end: "",
      userListForm: {
        end_time: "",
      },
      showArea: false,
      dingwei: "",
      fstime: "",
      endTimePop: false,
      index1: "-1",
      index2: "-1",
      index3: "-1",
      search1: "",
      happenTime: "",
      describe: "",
      map: {},
      desc: "",
      fileList: [],
      item1: "",
      uploadTime: "",
      item2: "",
      file: "123",
      item3: "",
      elMarker: null,
      list1: [
        {
          state: false,
          name: "高温",
          imgUrl: require("../assets/On-sitedisaster/gaowen.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/gaowen.png"),
        },

        {
          state: false,
          name: "火险",
          imgUrl: require("../assets/On-sitedisaster/huoxian.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/huoxian.png"),
        },
        {
          state: false,
          name: "干旱",
          imgUrl: require("../assets/On-sitedisaster/ganhan.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/ganhan.png"),
        },
        {
          state: false,
          name: "大风",
          imgUrl: require("../assets/On-sitedisaster/dafeng.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/dafeng.png"),
        },
      ],
      list2: [
        {
          state: false,
          name: "暴雨",
          imgUrl: require("../assets/On-sitedisaster/baoyu.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/baoyu.png"),
        },
        {
          state: false,
          name: "暴雪",
          imgUrl: require("../assets/On-sitedisaster/baoxue.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/baoxue.png"),
        },
        {
          state: false,
          name: "冰雹",
          imgUrl: require("../assets/On-sitedisaster/bingbao.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/bingbao.png"),
        },
        {
          state: false,
          name: "霜冻",
          imgUrl: require("../assets/On-sitedisaster/shuangdong.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/shuangdong.png"),
        },
      ],
      list3: [
        {
          state: false,
          name: "雷电",
          imgUrl: require("../assets/On-sitedisaster/leidian.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/leidian.png"),
        },
        {
          state: false,
          name: "大雾",
          imgUrl: require("../assets/On-sitedisaster/dawu.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/dawu.png"),
        },
        {
          state: false,
          name: "地质灾害",
          imgUrl: require("../assets/On-sitedisaster/dizhizaihai.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/dizhizaihai.png"),
        },
        {
          state: false,
          name: "其他",
          imgUrl: require("../assets/On-sitedisaster/qita.png"),
          imgUrlactive: require("../assets/On-sitedisaster/active/qita.png"),
        },
      ],

      LongAndLati: {
        lng: "",
        lat: "",
      },
      picture: {
        point: point,
      },
      areaName:'',
      cityName:''
    };
  },
  components: { footer },
  watch: {
    areaName() {
      this.getWeatherInfo();
    },
  },

  created() {
    this.currentDate_end = new Date();
    var datetime = new Date();

    var year = datetime.getFullYear();
    var month =
      datetime.getMonth() + 1 < 10
        ? "0" + (datetime.getMonth() + 1)
        : datetime.getMonth() + 1;
    var date =
      datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
    var hour =
      datetime.getHours() < 10
        ? "0" + datetime.getHours()
        : datetime.getHours();
    var minute =
      datetime.getMinutes() < 10
        ? "0" + datetime.getMinutes()
        : datetime.getMinutes();
    var second =
      datetime.getSeconds() < 10
        ? "0" + datetime.getSeconds()
        : datetime.getSeconds();
    // return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;//返回 YYYY-MM-DD HH:MM:SS

    this.userListForm.end_time =
      year +
      "-" +
      month +
      "-" +
      date +
      " " +
      hour +
      ":" +
      minute +
      ":" +
      second;
    this.location = getItem("location");
    this.dingwei = this.location[1].name + this.location[2].name;
    map.init().then((res) => {
      this.initMap();
      this.cityName = this.$store.getters.location[1].name

      this.areaName = this.$store.getters.location[2].name;
      //天气信息
      this.weatherInfo = this.$store.getters.saveWeatherInfo;
      //获取当前小时之前前24小时，
      this.formatWordTime = this.$util.formatWordTime();
      //请求当前到之前前24小时的天气信息
      this.getWeatherInfo();
    });
  },
  methods: {
    confirmEmitMet(value) {
      var _this = this;
      _this.showArea = false;
      _this.$util.Convertlatitude(value).then((result) => {
        _this.LongAndLati.lng = result[0];
        _this.LongAndLati.lat = result[1];
        var location = [result[0], result[1]];

        _this.cityName = value[1].name;
        _this.areaName = value[2].name;

        // _this.djclick(_this.map);

        _this.elMarker.remove();
        _this.elMarker = undefined;
        _this.addMarker(_this.map);
        //设置中心点
        _this.map.setCenter(location);
        _this.dingwei = value[1].name + value[2].name;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    clicksPopul() {
      this.showArea = true;

      this.arr1 = [this.cityName, this.areaName];
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "date") {
        return val + "时";
      }
      if (type === "fen") {
        return val + "分";
      }
      return val;
    },
    afterRead(file) {},

    getWeatherInfo() {
      var city = this.cityName;

      var cnty = this.areaName;

      var params = {
        city: city,
        cnty: cnty,
      };
      meteoroHomeApi
        .queryByCity(params)
        .then((res) => {
          this.weatherInfo = res.实况六要素;
          this.showEcharts = true;
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    endTimeChange(e) {
      this.currentDate_end = new Date();

      let endTimeArr = e.getValues(); //["2019", "03", "22", "17", "28"]
      this.userListForm.end_time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]} ${endTimeArr[3]}:${endTimeArr[4]}:00`;
    },
    afterRead(file) {
      console.log(file);
    },
    confirm() {
      //       var params ={
      // file:'123',

      //       }
      if (this.fileList.length == 0) {
        return this.$toast("请选择要上传的照片");
      }
      var item1 = this.list1.filter((it) => {
        return it.state == true;
      });
      var item2 = this.list2.filter((it) => {
        return it.state == true;
      });
      var item3 = this.list3.filter((it) => {
        return it.state == true;
      });

      var newarr = item1.concat(item2, item3);
      var newarr1 = [];

      newarr.forEach((it) => {
        newarr1.push(it.name);
      });
      var newarr2 = newarr1.join(",");

      var disasterInfo = {
        disasterType: newarr2,
        location:
          this.$store.getters.location[1].name +
          this.$store.getters.location[2].name,

        happenTime: this.userListForm.end_time,
        userId: this.$store.getters.userid,
        images: [],
        disasterDesc: this.desc,
      };

      let formData = new FormData();
      this.fileList.forEach((element) => {
        // disasterInfo.images.push(element.file.name)
        formData.append("images", element.file);
      });
      formData.append("disasterType", disasterInfo.disasterType);
      formData.append("location", disasterInfo.location);
      formData.append("happenTime", disasterInfo.happenTime);
      formData.append("userId", disasterInfo.userId);
      formData.append("disasterDesc", disasterInfo.disasterDesc);

      disastersituationApi
        .Uploaddisastersituation(formData)
        .then((res) => {
          this.$toast({
            message: "确认成功！",
            position: "center",
          });
          this.list1.forEach((item) => {
            item.state = false;
          });
          this.list2.forEach((item) => {
            item.state = false;
          });
          this.list3.forEach((item) => {
            item.state = false;
          });
          this.item2 = "";
          this.item1 = "";
          this.item3 = "";
          this.fileList = [];
          this.desc = "";
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    toSearch(item) {
      if (item != "") {
        if (this.$store.getters.location.length == 0) {
          this.$toast("未获取到位置信息，请从左上角进行选择！");
          return;
        }
        // this.$router.push(item)
        this.$router.push({
          path: item,
          query: {
            text: this.search1,
          },
        });
      } else {
        this.$toast("暂未开放，敬请期待！");
      }
    },
    onClickRight(item) {
      if (item != "") {
        if (this.$store.getters.location.length == 0) {
          this.$toast("未获取到位置信息，请从左上角进行选择！");
          return;
        }
        this.$router.push(item);
      } else {
        this.$toast("暂未开放，敬请期待！");
      }
    },
    clicks1(item, index, item1) {
      item.state = !item.state;
      this.index1 = index;
      this.item1 = item.name;
    },
    clicks2(item, index, item1) {
      item.state = !item.state;
      this.index2 = index;
      this.item2 = item.name;
    },
    clicks3(item, index, item1) {
      item.state = !item.state;
      this.index3 = index;
      this.item3 = item.name;
    },
    focus(event) {
      event.currentTarget.select();
    },
    loadPlugin() {
      var _this = this;

      SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
        // _this.initMap();
      });
    },
    initMap() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      var _this = this;
      var log = Number(_this.$store.getters.cityLongAndLati[0]);
      var lat = Number(_this.$store.getters.cityLongAndLati[1]);

      _this.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 12,
        // 地图中心点
        center: [log, lat],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
      });
      _this.LongAndLati.lng = _this.$store.getters.cityLongAndLati[0];
      _this.LongAndLati.lat = _this.$store.getters.cityLongAndLati[1];

      _this.addMarker(_this.map);
      // 监听地图加载完成事件
      // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
      _this.map.on("load", function (e) {
        console.log("地图加载完成");

        _this.$toast.clear();

        _this.map.on("click", function (e) {
          _this.LongAndLati.lng = e.lngLat.lng;
          _this.LongAndLati.lat = e.lngLat.lat;
          _this.djclick(_this.map);
          _this.elMarker.remove();
          _this.elMarker = undefined;
          _this.addMarker(_this.map);
        });
      });
    },

    djclick(map) {
      let _this = this;

      SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
        var geocodingTask = new SGMap.GeocodingTask();
        geocodingTask
          .getAddress({
            location: [_this.LongAndLati.lng, _this.LongAndLati.lat],
          })
          .then(function (result) {
            _this.dingwei = result.formattedAddress;
          });
      });
      //画marker点
    },
    addMarker(map) {
      var _this = this;
      if (!_this.elMarker) {
        var el = document.createElement("div");

        el.className = "marker";
        el.style.backgroundImage =
          'url("https://map.sgcc.com.cn/products/js-sdk/v3/assets/images/markers_new2_4ab0bc5_78.png")';
        el.style.width = "25px";
        el.style.height = "38px";

        _this.elMarker = new SGMap.Marker({
          element: el,
          anchor: "bottom",
        })

          .setLngLat([_this.LongAndLati.lng, _this.LongAndLati.lat])
          .addTo(map);
      }
    },

    removeMarker() {},
    //查询
    geoCode() {
      var _this = this;
      var location = [];

      SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
        var geocodingTask = new SGMap.GeocodingTask();

        // 地理编码
        geocodingTask
          .getLocation({
            address: _this.dingwei,
            region: "太原市",
            isEncode: false,
          })
          .then(function (result) {
            var lnglat = result.location;

            _this.map.easeTo({
              center: lnglat,
              zoom: 15,
            });
          });
      });

      _this.map.on("click", function (e) {
        _this.LongAndLati.lng = e.lngLat.lng;
        _this.LongAndLati.lat = e.lngLat.lat;
        _this.djclick(_this.map);
        _this.addMarker(_this.map);
        // _this.elMarker.remove();
      });
    },
  },
  components: {
    comArea,
  },
};
</script>
<style type="text/css" lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  background-image: url("../assets/topBg.png");
  background-repeat: no-repeat;
}
.search {
  width: 100%;
  height: 45px;
  position: relative;
  background: #ffffff;
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
  img {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    left: 10%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 99999999;
  }
  /deep/ .van-cell {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 34px;
    background: #f5f5f5;
    border-radius: 17px;
  }
  /deep/ .van-cell__value {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 34px;
    background: #f5f5f5;
    border-radius: 17px;
  }
  /deep/ .van-field__control {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 34px;
    padding-left: 38px;

    background-color: #f5f5f5 !important;
    border-radius: 17px;
  }
  /deep/ .van-field__control::-webkit-input-placeholder {
    font-size: 13px;

    font-weight: 400;
    color: #999999;
  }
}
.Disastermanagement {
  height: 21px;
  font-size: 15px;
  margin-top: 15px;
  padding-left: 17px;
  font-weight: 500;
  color: #101010;
  line-height: 21px;
}
.chaxun {
  position: absolute;
  z-index: 9999999;
  font-size: 14px;
  right: 17px;
}
.chaxu /deep/ .van-icon {
  font-size: 16px !important;
}
/deep/ .van-icon {
  font-size: 20px !important;
}
.queren {
  margin-top: 900px;
  z-index: 99999999;

  /deep/ .van-button {
    width: 270px;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: transparent !important;
    border: 0 !important;
  }
  /deep/ .van-button__content {
    width: 270px;
    height: 40px;
    background: #357cff;
    border-radius: 20px;
    color: #fff;
  }
}
.zaiqingtext /deep/ .van-field__control {
  height: 90px !important;
}
.zaiqingtext /deep/ .van-field__word-limit {
  color: #999999;
}
.zaiqingtext /deep/ textarea.van-field__control::-webkit-input-placeholder {
  color: #fff;
  font-size: 12px;
}
.zaiqingtext /deep/ .van-field__label {
  width: 30px;
}
// .queren /deep/ .van-button {
//   width: 100px;
//   height: 30px;
//   border-radius: 10px;
//   background-color: #93c0fe;
//   color: #fff;
//   margin: auto;
// }
.date-time-input-wrap {
  margin-top: 6px;
  position: relative;
  /deep/ .van-field__control {
    padding-left: 25px;
  }
  img {
    position: absolute;
    z-index: 999999;
    display: block;
    width: 15px !important;
    height: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 13px;
  }
}
#ditudist {
  width: 100%;
  position: absolute;
  top: 950px;
  // bottom: 0;

  height: 220px;
  background: url("../assets/dtwgn.png") center no-repeat;
  background-size: cover;
}

.bottomConditudist {
  // background-color: rgb(172, 163, 163);
  text-align: center;
  position: absolute;
  // z-index: 9999;
  color: #fff;
  bottom: 20px;
  width: 100%;
  font-size: 16px;

  // margin-bottom: 30px;
}
/deep/ .van-field__control {
  background: #f7f7f7;
  border-radius: 10px;

  height: 30px !important;

  font-size: 13px;

  font-weight: 400;

  color: #999999;
  outline: none;
  padding-left: 10px;
}
/deep/ .van-field__control::-webkit-input-placeholder {
  color: #999999 !important;
  font-size: 12px;
}
/deep/ .date-time-input-wrap {
  color: #fff;
}
.text /deep/ .van-button {
  width: 60px;

  height: 34px;
  background: rgba(3, 120, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #357cff;
  border-radius: 30px;
  font-size: 13px;

  font-weight: 400;
  color: #357cff;

  margin-left: 5px;
}
.zaiqing {
  font-weight: 500;
  color: #101010;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 8px;
}
.van-cell-group {
  background-color: transparent !important;
  padding-top: 4px !important;
}
.van-cell {
  background-color: transparent !important;
}

.photo {
  font-size: 15px;

  font-weight: 500;
  color: #101010;
  margin-top: 30px;
}
.text {
  margin-top: 8px;
  font-size: 13px;
  display: flex;
  position: relative;
  /deep/ .van-field__control {
    padding-left: 25px;
  }
  img {
    position: absolute;
    z-index: 999999;
    display: block;
    width: 15px !important;
    height: 15px !important;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 13px;
  }
}
/deep/ .van-nav-bar__content {
  background: #357cff;
  margin-top: 0;
}
/deep/ .van-uploader__preview-image {
  margin-top: 10px;
}

/deep/ .van-uploader__upload {
  background-color: transparent;

  background: #f7f7f7;
  border-radius: 10px;
  margin-top: 15px;
}

/deep/ .van-cell {
  padding: 0;
}

// .active {
//   background-color: blue;
// }

// actives {
//   background-color: #d2d2d2;
// }

/deep/ .van-field__label {
  color: #fff;
  width: 70px;
}

.box2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: #f7f7f7;
  backdrop-filter: blur(0px);
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 5px;
  margin-bottom: 6px;
}
.fstime {
  width: 60px;
  height: 21px;
  font-size: 15px;

  font-weight: 500;
  color: #101010;
}

.active {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #357cff;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 5px;
  margin-bottom: 6px;
}

.staCompreWrap1 {
  overflow-y: auto;
  overflow-x: hidden;
  .pageCover();
  color: #fff;
  position: relative !important;

  background-repeat: no-repeat;
  background-size: cover;
  background: #ffffff;

  .btnArea {
    margin: 10px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;

    .btnLine {
      margin-bottom: 10px;
    }

    .btnLine:last-child {
      margin-bottom: 0px;
    }

    .btnLineSmall {
      margin-right: 10px;
    }
  }

  .titleArea {
    position: relative;
    left: 9px;
    top: 0;

    img {
      width: 95%;
      background-size: cover;
    }

    .bottom {
      position: absolute;
      top: 650px;
      padding: 7px;
      border-radius: 10px;
      width: 95%;
      height: 200px;
      background-color: #fff;
      margin-bottom: 100px;
    }

    .top {
      position: absolute;
      top: 0;

      width: 95%;
      border-radius: 10px;
      height: 600px;
      padding: 7px;

      input {
        border: transparent;

        width: 100%;
        /* border: 1px solid; */
      }
    }

    .box1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: -2px;
      margin-right: 18px;
      margin-bottom: 10px;
    }

    p {
      font-size: 12px;

      span {
        color: #fff;
        margin-left: 5px;
      }
    }

    .right {
      padding-top: 8px;
      width: 100%;
      height: 210px;

      .class9 {
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: space-evenly;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-weight: 400;
          color: #656b75;
          margin-bottom: 15px;
        }
      }
    }

    .titleCon {
      position: absolute;
      top: 20px;
      .px2rem(left, 25px);
      color: white;
      font-size: 16px;
      font-weight: bold;
    }

    .staDistime {
      position: absolute;
      left: 35px;
      .px2rem(top, 50px);
      color: white;
    }
  }

  .listArea {
    position: absolute;
    left: 10px;
    right: 10.3px;
    top: 140px;
    bottom: 10%;
    overflow: scroll;
    background: white;

    .listTitle {
      overflow: hidden;
      padding: 10px 0;

      span {
        float: left;
        width: 33.33%;
        text-align: center;
      }

      span.titleFour {
        width: 25%;
      }

      .titleOne {
        width: 30%;
      }

      .titleTwo {
        width: 36.66%;
      }

      .titleLineHeightMiddle {
        line-height: 36.8px;
      }
    }

    .listTitle:first-child {
      color: #1989fa;
      font-weight: bold;
    }

    .listTitle:nth-child(2n) {
      background-color: #dcefff;
    }

    .listCon {
      padding: 10px;
      margin-bottom: 10px;
    }
  }

  .elementArea {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 56px;
    height: 200px;
    background: white;
    border-radius: 10px;
    padding: 10px;
  }

  .elementListArea {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 286px;
    bottom: 60px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    overflow: scroll;

    .elementList {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ececec;
    }

    .elementListLine {
      font-size: 14px;
      padding: 5px 0;
    }

    .elementList:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
  }

  /deep/ .van-tabs {
    margin: 10px;
  }

  /deep/ .van-tab--active {
    color: #1989fa;
  }

  /deep/ .van-tabs--line .van-tabs__wrap {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

.factorBg {
  position: absolute;
  left: 0;
  .px2rem(bottom, 0px);
  width: 100%;
  height: 200px;
}

.bottomCon {
  color: white;
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
}
</style>
